<template>
  <div id="hot-nfts">
    <FilterBar @queryData="queryData" />
    <div class="item-box" v-if="hotArtworks.count != 0">
      <ArtItem
        :artData="item"
        class="art-item"
        v-for="item in hotArtworks.data"
        :key="item.id"
        :type="'selling'"
      />
    </div>
    <div class="pagination" v-if="hotArtworks.count != 0">
      <el-pagination
        :page-size="20"
        :pager-count="5"
        layout="prev, pager, next"
        :current-page="parseInt(filterOptions.pageIndex)"
        :total="hotArtworks.count"
        background
        @prev-click="prevPage"
        @next-click="nextPage"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
    <div class="no-result" v-if="hotArtworks.count == 0">
      <span>什么都没找到</span>
    </div>
  </div>
</template>

<script>
import ArtItem from "@/components/ArtItem";
import { mapState } from "vuex";
import FilterBar from "@/components/FilterBar";
export default {
    name:"HotHfts",
    components: {
    // PublicArt,
    ArtItem,
    FilterBar,
  },
  provide: {},
  computed: {
    ...mapState({
      hotArtworks: (store) => store.hot.hotArtworks,
      filterOptions: (store) => store.hot.filterOptions,
    }),
  },
  data() {
    return {
      // 是否展示购买确认弹窗
      showFlag: false,

    };
  },

  mounted() {
    // this.$store.dispatch("allArtworks");
    let queryData = {
      pageSize: "20",
      pageIndex: "1",
      classify: "所有",
      form_of_sale: "所有",
      minprice: "0",
      maxprice: "100000000000000000000000000000",
      type: "shop",
    };
    if (this.$store.getters.user_address != null) {
      queryData.user_address = this.$store.getters.user_address;
    }
    this.$store.dispatch("hotArtworks", queryData);
  },
  methods: {
    // 购买艺术品
    async buyArt(aid, price) {
      console.log(aid, price);
      let accounts = await this.$web3.eth.getAccounts();
      this.ContractAbi.methods
        .buyArt(aid)
        .send({ from: accounts[0], value: price })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => console.log(err));
    },

    // 上一页
    prevPage() {
      this.pageIndex = parseInt(this.filterOptions.pageIndex) - 1;
      this.$store.dispatch("hotArtworks", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },
    // 下一页
    nextPage() {
      this.pageIndex = (parseInt(this.filterOptions.pageIndex) + 1).toString();
      this.$store.dispatch("hotArtworks", {
        ...this.filterOptions,
        pageIndex: this.pageIndex,
      });
    },

    // 页数改变
    pageChange(page) {
      this.$store.dispatch("hotArtworks", {
        ...this.filterOptions,
        pageIndex: page.toString(),
      });
    },

    // 发起请求
    queryData(data) {
      this.$store.dispatch("hotArtworks", data);
    },
  },
};
</script>

<style>
</style>